<template>
  <view>
    <view class="login-box">
      <image src="https://ny-public.obs.cn-east-3.myhuaweicloud.com/userLogin.png"></image>
    </view>
    <view class="login-read-box">
      <view class="login-read">
        <checkbox-group @change="setCheckedHandle">
          <label>
            <checkbox style="transform: scale(0.68)" activeBorderColor="#000" iconColor="#000" color="#000"
              value="checked" :checked="cheked">
            </checkbox>
          </label>
        </checkbox-group>
        <view class="theme-color">
          <text class="read">我已阅读并同意</text>
          <text>《服务协议》</text>
          <text>《隐私政策》</text>
          <text @click="toService">《预定服务协议》</text>
          <text @click="toContract">《租车服务合同》</text>
        </view>
      </view>
    </view>
    <view class="login-wx-btn">
      <button type="default" v-if="!cheked" hover-class="none" @click="setPhoneNumberTip">
        手机号快捷登录
      </button>
      <button type="default" v-else hover-class="none" open-type="getPhoneNumber" @getphonenumber="setPhoneNumber">
        手机号快捷登录
      </button>
    </view>
    <view class="login-phone">
      <text @click="codeHandle('/pages/login/phone')"> 手机号登录/注册</text>
    </view>
    <view class="no-login" @click="toHomeHandle()">暂不登录</view>
    <!-- 确认登录 -->
    <up-popup v-model:show="show" mode="center" zIndex="20000" style="border-radius: 20rpx">
      <view class="container-box">
        <view class="title">温馨提示</view>
        <view class="main">
          <text>阅读并同意</text>
          <text>《服务协议》《隐私政策》《预定服务协议》《租车服务合同》</text>
        </view>
        <view class="btn">
          <button type="default" @click="closeHandle">取消</button>
          <button type="default" open-type="getPhoneNumber" @getphonenumber="setPhoneNumber">
            同意并登录
          </button>
        </view>
      </view>
    </up-popup>
  </view>
</template>

<script setup>
import { reactive, ref } from "vue";
import { onShow, onLoad } from "@dcloudio/uni-app";
import { postRequest, getRequest } from "@/reuqest/request.js";
onLoad(() => { });
const cheked = ref(false);
const show = ref(false);
const setPhoneNumberTip = () => {
  console.log("手机号快捷登录", cheked.value);
  if (!cheked.value) {
    show.value = true;
  }
};
const closeHandle = () => {
  show.value = false;
};
const toContract = () => {
  uni.navigateTo({
    url: "/pages/set/setcontract/setcontract",
  });
};
const toService = () => {
  uni.navigateTo({
    url: "/pages/set/reservAgreement/index",
  });
}
// 授权登录
const setPhoneNumber = (e) => {
  console.log(e, "授权登录");

  uni.setStorageSync("token", "5e347238-0e53-4a34-9bd5-c67b93094f8c");
  uni.setStorageSync("phone", "17678816817");
  uni.setStorageSync("userUuId", "responseData.uuid");
  uni.navigateBack();

  return
  uni.showLoading({ title: "登录中..." });
  postRequest("/wx-user-center/api/v1/bm/login/loginByWechat", {
    wechatCode: e.detail.code,
  })
    .then((responseData) => {
      uni.hideLoading();
      console.log(responseData, "token");
      if (responseData) {
        uni.showToast({
          title: `登录成功`,
          icon: "none",
        });
        uni.setStorageSync("token", responseData.token);
        uni.setStorageSync("phone", responseData.phone);
        uni.setStorageSync("userUuId", responseData.uuid);

        uni.navigateBack();
      }
    })
    .catch((error) => { });
};
// 去验证码登录
const codeHandle = (url) => {
  uni.navigateTo({
    url: url,
  });
};
// 访客用户
const toHomeHandle = (url) => {
  uni.navigateBack();
};
// 隐私政策
const setCheckedHandle = (e) => {
  if (e.detail.value.length > 0) {
    cheked.value = true;
    // visable.value  =true
  } else {
    cheked.value = false;
  }
};
</script>

<style lang="scss">
.login-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 600rpx;

  image {
    width: 192rpx;
    height: 192rpx;
  }
}

.login-read-box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 20rpx;

  .login-read {
    display: flex;
    width: 618rpx;
    font-size: 30rpx;

    .read {
      color: #000000;
    }
  }
}

.login-wx-btn {
  button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 618rpx;
    height: 102rpx;
    background: #000000;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    font-size: 30rpx;
    color: #ffffff;
  }
}

.login-phone {
  padding-top: 46rpx;
  display: flex;
  justify-content: center;
  align-items: center;

  font-weight: bold;
  font-size: 30rpx;
  color: #000000;
}

.no-login {
  width: 100%;
  padding-top: 300rpx;
  display: flex;
  justify-content: center;
  align-items: center;

  font-weight: 400;
  font-size: 28rpx;
  color: #757575;
}

.u-popup__content {
  border-radius: 20rpx;

  .container-box {
    width: 600rpx;
    border-radius: 20rpx;
    border-radius: 16rpx;

    .title {
      display: flex;
      justify-content: center;
      padding: 20rpx 0rpx;
    }

    .main {
      padding: 0 20rpx;
      height: 200rpx;
      align-items: center;

      text:nth-of-type(1) {
        font-size: 30rpx;
        color: #000000;

      }

      text:nth-of-type(2) {
        font-weight: 400;
        font-size: 30rpx;
        color: #986c5d;
      }
    }

    .btn {
      display: flex;
      justify-content: space-evenly;

      button {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 30rpx;
        width: 40%;
        // height: 82rpx;
        border-radius: 16rpx;
        font-size: 30rpx;
      }

      button:nth-of-type(1) {
        background: rgba(0, 0, 0, 0);
        border: 2rpx solid #000000;
      }

      button:nth-of-type(2) {
        background: #000000;
        color: #ffffff;
      }
    }
  }
}
</style>
